<template>
  <div class="com-container"
       style="width:100%;height:100%">
    <div class="com-chart"
         style="width:100%;height:100%"
         ref="nebar_ref"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      isReady: false
    };
  },

  mounted () {
    this.initChart();
    this.isReady = true
    this.getData();
  },
  methods: {
    //初始化echartInstance对象
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.nebar_ref);
    },
    //获取服务器数据 后续接口获取数据方法处
    getData () {
      let chartData = this.dashboardData.outStayProportion
      let xData = []
      let yData = []
      chartData.map((item) => {
        if (item.dormitory != null) {
          yData.push(item.dormitory)
        }
        else if (item.college != null) {
          yData.push(item.college)
        } else {
          yData.push(item.major + item.grade)
        }
        xData.push(item.proportion)

      })
      this.updataChart(xData, yData);
    },
    //更新图表
    updataChart (xData, yData) {
      var num = xData;
      const option = {

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: 10,
          bottom: 30,
          left: 0,
        },
        xAxis: {
          type: "category",
          axisLine: { show: true },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          data: yData,
        },
        yAxis: {
          type: "value",
          position: "top",
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },

        },
        series: [
          {
            name: "Cost",
            type: "bar",
            barWidth: "100%",
            stack: "Total",
            label: {
              show: true,
              formatter: "{b}",
            },
            data: num.map((item) => {
              return {
                value: item,
                itemStyle: {
                  normal: {
                    barBorderRadius: item > 0 ? [33, 33, 0, 0] : [0, 0, 33, 33],
                    color:
                      item > 0 ? "rgb(56, 199, 249)" : "rgb(220, 252, 122)",
                  },
                },
              };
            }),
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  }
  ,
  computed: {
    dashboardData () {
      return this.$store.state.dashBoardData
    }
  },
  watch: {
    dashboardData: {
      immediate: true,
      handler: function () {
        if (this.isReady) {
          this.getData();
        }

      }
    }
  }
};
</script>

<style>
</style>